<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CloudBase AI ToolKit 扑克牌案例画廊 - Retro-futuristic</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 引入 Design Specification 中的字体 */
        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&family=Josefin+Sans:wght@400;700&display=swap');
        
        .font-display { font-family: 'Space Mono', monospace; }
        .font-body { font-family: 'Josefin Sans', sans-serif; }
        
        /* 核心画布和背景 */
        .poker-canvas {
            width: 800px;
            height: 600px;
            background-color: #1A1A2E; /* 深太空蓝 */
            overflow: hidden;
            color: #F0F0FF; /* 亮白文字 */
            box-shadow: 0 0 50px rgba(233, 69, 96, 0.4); /* 柔和的外部霓虹红光 */
        }

        /* 扑克牌样式核心 */
        .poker-card {
            background-color: #2B2B45; /* 卡片基色 */
            border: 3px solid #BFFF00; /* 霓虹绿边框 */
            border-radius: 12px;
            /* 霓虹发光效果 (Primary Accent) */
            box-shadow: 0 0 10px #E94560, inset 0 0 5px rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
            cursor: pointer;
            
            /* 扑克牌风格：卡片角落的定制符号 */
            position: relative;
        }

        /* 悬停效果：增强霓虹感和位移 */
        .poker-card:hover {
            box-shadow: 0 0 25px #E94560, inset 0 0 10px rgba(255, 255, 255, 0.8);
            transform: scale(1.05) rotate(0deg) !important; /* 取消倾斜，突出显示 */
            z-index: 10;
        }

        /* 扑克牌符号 (使用伪元素模拟) */
        .card-symbol::before {
            content: attr(data-symbol);
            position: absolute;
            font-size: 2.5rem;
            font-weight: 900;
            line-height: 1;
            color: #E94560; /* 红心红 */
            font-family: 'Space Mono', monospace;
        }
        .card-symbol.top-left::before { top: 8px; left: 10px; }
        .card-symbol.bottom-right::before { bottom: 8px; right: 10px; transform: rotate(180deg); }

        .text-neon-red { color: #E94560; }
        .text-neon-green { color: #BFFF00; }
    </style>
</head>
<body>

<div class="poker-canvas font-body p-8">

    <header class="mb-10 text-left relative z-10">
        <h1 class="text-4xl font-display font-bold tracking-widest text-neon-green leading-snug">
            PROJECT <span class="text-neon-red">CASES</span>
        </h1>
        <p class="text-lg font-body uppercase tracking-wider text-[#F0F0FF]/80 -mt-1 ml-1">
            AI Toolkit High-Impact Prototypes
        </p>
    </header>

    <div class="relative h-[420px] w-full">
        
        <a href="#" class="poker-card w-[350px] h-[250px] p-6 absolute top-0 left-[20px] transform -rotate-1 translate-x-0 card-symbol top-left" data-symbol="A">
            <div class="flex flex-col h-full justify-between relative z-10">
                <div class="text-right">
                    <span class="text-xs uppercase font-bold text-neon-green border border-neon-green px-2 py-0.5">联机游戏</span>
                </div>
                <div>
                    <h3 class="text-2xl font-display font-bold mb-2 leading-tight text-neon-red">
                        联机版分手厨房小游戏
                    </h3>
                    <p class="text-sm text-[#F0F0FF]/80">两天上线一款可联机的游戏，全栈应用实践案例。</p>
                </div>
            </div>
            <div class="card-symbol bottom-right" data-symbol="A"></div>
        </a>

        <a href="#" class="poker-card w-[320px] h-[200px] p-5 absolute top-[100px] left-[300px] transform rotate-1 translate-x-1/2 card-symbol top-left" data-symbol="K">
            <div class="flex flex-col h-full justify-between relative z-10">
                <div class="text-right">
                    <span class="text-xs uppercase font-bold text-neon-red">微信小程序</span>
                </div>
                <div>
                    <h3 class="text-xl font-display font-bold mb-1 leading-snug">
                        AI打造专属“云书房”
                    </h3>
                    <p class="text-xs text-[#F0F0FF]/80">我用「CloudBase AI ToolKit」一天做出"网络热词"小程序</p>
                </div>
            </div>
            <div class="card-symbol bottom-right" data-symbol="K"></div>
        </a>

        <a href="#" class="poker-card w-[300px] h-[180px] p-4 absolute top-[250px] left-[50px] transform -rotate-2 card-symbol top-left" data-symbol="Q">
            <div class="flex flex-col h-full justify-between relative z-10">
                <div class="text-left">
                    <span class="text-xs uppercase font-bold text-neon-green">企业应用</span>
                </div>
                <div>
                    <h3 class="text-lg font-display font-bold mb-1 leading-snug">
                        医院实习生排班系统
                    </h3>
                    <p class="text-xs text-[#F0F0FF]/60">告别痛苦的Excel表格，实现云化部署。</p>
                </div>
            </div>
            <div class="card-symbol bottom-right" data-symbol="Q"></div>
        </a>
        
    </div>

</div>

</body>
</html>